<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        ul, ol, li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .banner {
            width: 1400px;
            height: 355px;
            margin: 20px auto;
            cursor: pointer;
            overflow: hidden;

            -moz-user-select: none; /*火狐*/
            -webkit-user-select: none; /*webkit浏览器*/
            -ms-user-select: none; /*IE10*/
            -khtml-user-select: none; /*早期浏览器*/
            user-select: none;

            position: relative;
        }

        img {
            width: 100%;
            height: 100%;
            border-radius: 5px;
        }

        ul {
            width: 100%;
            height: 100%;
        }

        ul > li {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 1400px;
            top: 0;

            opacity: 0;

            transition: 0.4s linear;
        }

        ul > li.active {
            left: 0;
            opacity: 1;
        }

        ol {
            width: 100px;
            height: 20px;
            padding: 0 2px;
            background-color: rgba(68, 68, 68, 0.8);
            border-radius: 10px;
            position: absolute;
            right: 50px;
            bottom: 20px;

            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        ol > li {
            width: 13px;
            height: 13px;
            background-color: #8c8c8c;
            border-radius: 50%;

            /*transition: 0.5s linear;*/
        }

        ol > li.active {
            background-color: #ffffff;
        }

        .banner > div {
            width: 50px;
            height: 50px;
            line-height: 46px;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);

            display: flex;
            justify-content: space-around;
            font-size: 30px;
            font-weight: 200;
            color: #ffffff;
        }

        .left {
            left: 30px;
            opacity: 0;
        }

        .right {
            right: 30px;
            opacity: 0;
        }

    </style>
</head>
<body>
<div class="banner">
    <!--图片区域-->
    <ul class="img-box">
        <li class="active"><img src="/images/01.jpg" alt=""></li>
        <li><img src="/images/02.jpg" alt=""></li>
        <li><img src="/images/03.jpg" alt=""></li>
        <li><img src="/images/04.jpg" alt=""></li>
    </ul>
    <!--圆点区域-->
    <ol class="point">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <!--左右切换按钮-->
    <div class="left">&lt;</div>
    <div class="right">&gt;</div>
</div>
<script>
    //获取元素
    const images = document.querySelectorAll("ul>li"),
        points = document.querySelectorAll("ol>li"),
        left = document.querySelector('.left'),
        right = document.querySelector('.right'),
        banner = document.querySelector('.banner');

    //清除类名函数
    function clearClassName(i) {
        images[i].className = ''
        points[i].className = ''

    }

    //切换一张的函数
    function change(i, j, k) {
        images[j].style.left = '-1400px'
        images[k].style.left = '1400px'
        images[i].className = 'active'
        images[i].style.left = '0'
        points[i].className = 'active'
    }

    //上下张定位函数
    function slide(i) {
        j = i - 1
        if (j < 0) {
            j = images.length - 1
        }
        k = i + 1
        if (k > images.length - 1) {
            k = 0
        }
        return [j, k]
    }

    //自动切换函数
    function lazy() {
        window.s1 = setInterval(function () {
            //清除类名
            clearClassName(i)
            i++
            if (i > images.length - 1) {
                i = 0
            }
            slide(i)
            change(i, j, k)
        }, 4000);
    }

    let i = 0;
    let j = 0;
    let k = 0;

    //循环遍历给每个小圆点绑定点击事件
    points.forEach(function (item, index) {
        item.onclick = function () {
            //清除类名
            clearClassName(i)
            //点击小圆点切换图片
            i = index
            slide(i)
            change(i, j, k)

            //停止自动切换
            clearInterval(s1)
            //开始自动切换
            lazy()
        }
    })

    //将左右按钮绑定点击事件
    left.onclick = function () {
        //清除类名
        clearClassName(i)
        //点击左按钮切换上一张图片
        i--
        if (i < 0) {
            i = images.length - 1
        }
        slide(i)
        change(i, j, k)

        //停止自动切换
        clearInterval(s1)
        //开始自动切换
        lazy()
    }
    right.onclick = function () {
        //清除类名
        clearClassName(i)
        //点击右按钮切换下一张图片
        i++
        if (i > images.length - 1) {
            i = 0
        }
        slide(i)
        change(i, j, k)

        //停止自动切换
        clearInterval(s1)
        //开始自动切换
        lazy()
    }

    //自动切换功能
    lazy()

    //将鼠标移到图片区域左右切换按钮出现，离开消失
    banner.onmouseenter = function () {
        left.style.opacity = '1'
        right.style.opacity = '1'
    }
    //将鼠标移到左右切换按钮区域，colo橙色
    banner.onmouseleave = function () {
        left.style.opacity = '0'
        right.style.opacity = '0'
    }

    left.onmouseenter = function () {
        left.style.color = '#fef200'
    }
    left.onmouseleave = function () {
        left.style.color = '#fff'
    }
    right.onmouseenter = function () {
        right.style.color = '#fef200'
    }
    right.onmouseleave = function () {
        right.style.color = '#fff'
    }
</script>
</body>
</html>